// 1、naive-ui库中的二维码标签<NQrCode/>，在2.36.0版本，开始提供该组件
// 2、login页面向myqrcode页面跳转传参时，"vue-router": "^4.1.4"版本开始增加了删除未使用的参数这个功能
// router.push({ name: 'myqrcode', query: { barCodeUrl : barCodeUrlValue } })
// console.log('传递的数据: ', route.query.barCodeUrl)

import { defineComponent, ref, onMounted } from 'vue'
import styles from './index.module.scss'
import {
  NButton,
  NQrCode,
  NSpace,
  NTag
} from 'naive-ui'

import { useRouter } from 'vue-router'
import type { Router } from 'vue-router'

const myqrcode = defineComponent({
  name: 'myqrcode',
  setup() {
    const state = history.state
    const barCodeUrlValue = ref('')
    onMounted(async () => {
      barCodeUrlValue.value = state.barCodeUrl
    })

    const router: Router = useRouter()
    const handleLogin = () => {
      router.push({ path: 'login' })
    }

    return {
      handleLogin,
      barCodeUrlValue
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles['code-model']}>
          <NSpace>
            <NQrCode id='qr-code' value={this.barCodeUrlValue} size={183}></NQrCode>
          </NSpace>
          <NSpace>
            <NTag style={{ marginTop: '10%',  height: '80%', color: 'black', textColor: '#555', borderColor: '#555' }} >
              扫描二维码，获取“动态验证码”
              <br/>
              获取成功后，返回重新登录
            </NTag>
          </NSpace>

        </div>
        <div class={styles['back-model']}>
          <NButton
            class='btn-qrcode'
            round
            type='info'
            style={{ color: 'black' }}
            onClick={this.handleLogin}
          >
            返回
          </NButton>
        </div>
      </div>
    )
  }
})

export default myqrcode
